<template>
  <ElCascader
    style="width: 100%"
    :model-value="isProvince ? [province] : [province, city, district]"
    :options="region"
    :props="{
      value: 'label',
      label: 'label',
      children: isProvince ? 'none' : 'children',
    }"
    @change="handleChange"
    clearable
  ></ElCascader>
</template>
<script setup lang="ts">
import { ElCascader } from "element-plus";
import region from "@/library/region";

const emit = defineEmits(["update:province", "update:city", "update:district"]);
defineProps({
  isProvince: {
    type: Boolean,
    default: false,
  },
  province: {
    type: String,
    default: "",
  },
  city: {
    type: String,
    default: "",
  },
  district: {
    type: String,
    default: "",
  },
});

const handleChange = function (v: any) {
  v = v || [];
  emit("update:province", v[0] || "");
  emit("update:city", v[1] || "");
  emit("update:district", v[2] || "");
};
</script>
